<!DOCTYPE HTML>
<html lang="zxx">

<head>
    <title>Login</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""
    />
    <script src="js/axios.min.js"></script>
    <script src="js/query.js"></script>
    <!-- Meta tag Keywords -->
    <!-- css files -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
    <!-- Style-CSS -->
    <link rel="stylesheet" href="css/fontawesome-all.css">
    <!-- Font-Awesome-Icons-CSS -->

    <script>
        window.onload = function () {
            findAll();
        }

        function findAll() {
            axios.get("class/findAll").then(resp => {
                var info = resp.data;
                var str = "";
                info.forEach(clas => {
                    str += `<tr><td>${clas.name}</td><td>${clas.createDate}</td><td>${clas.teacher}</td>
                    <td><input type="button" value="删除班级" onclick="del(${clas.id})"></td></tr>`;
                });
                $n("data").innerHTML = str;
            });
        }

        function del(id) {
            axios.get("class/del", {
                params: {
                    id: id
                }
            }).then(resp => {
                var info = resp.data;
                console.log(info);
                if (info === "OK") {
                    alert("删除成功");
                } else if (info === "NO") {
                    alert("此班还有学生，无法删除");
                }
                findAll();
            });
        }

        function g() {
            $n("addDiv").style.visibility = "visible";
        }

        function g_2() {
            $n("addDiv").style.visibility = "hidden";
        }

        function add() {
            axios.get("class/add", {
                params: {
                    name: $n("name").value,
                    teacher: $n("teacher").value,
                    day: $n("day").value,
                }
            }).then(resp =>{
                var info = resp.data;
                if (info == "OK"){
                    alert("添加成功");
                    g_2();
                    findAll();
                }
            })};

    </script>

</head>
<div id="bg">
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
</div>

<div style="margin-left: 200px;margin-top: 100px;background-color: white;width: 500px;height: 300px;text-align: center">
    <table style="width: 500px">
        <tr style="border: 5px solid black">
            <th>班级名称</th>
            <th>开班时间</th>
            <th>带班老师</th>
            <th>操作</th>
        </tr>
        <tr style="height: 30px ;width: auto"></tr>
        <tbody id="data" style="text-align: center;margin-top: 30px">

        </tbody>
    </table>
</div>

<div style="text-align: center;width:700px">
    <input type="button" value="添加班级" onclick="g()">
</div>
<div style="background-color:black;width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            " id="addDiv">
    <div style=" border: 3px solid #000;
            width: 400px;
            height: 300px;
            padding: 50px;
            background-color: white;">
        班级名称：<input type="text" id="name"><br>
        带班老师：<input type="text" id="teacher"><br>
        开班时间：<input type="date" id="day"><br>
        <input type="button" value="添加" onclick="add()">
        <input type="button" value="返回" onclick="g_2()">
    </div>
</div>
<!-- //content -->

<!-- Jquery -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- //Jquery -->

<!-- effect js -->
<script src="js/canva_moving_effect.js"></script>
<!-- //effect js -->
</html>